<template>
    <ListPage ref="page" :query="query" :api="getConsultationRecordsList">

        <template #search="{ page, hiddenColumns }">
            <PageSearch ref="search" :query="query" :page="page" has-box @search="() => ($refs.page as any).getData()">
                <template #auth>
                    <ElButton type="success" @click="openZdycx">自定义查询</ElButton>
                    <ElButton v-if="auth.has('add')" type="primary" @click="onAddConsultationRecords">添加咨询记录</ElButton>
                </template>
                <template #input="{ }">
                    <SearchInput v-model="query.keyword" placeholder="客户名称/店铺名称/联系人/联系人手机号/其它联系方式/报价明细及其它/店铺城市"
                        :data="query" :hidden-columns="(hiddenColumns as any)"
                        @trigger="(e) => ($refs.search as any).trigger(e)" @search="() => ($refs.page as any).getData()"
                        @change-column="(prop) => ($refs.page as any).changeColumn(prop)"></SearchInput>
                </template>
            </PageSearch>
        </template>

        <template #table="{ data, hiddenColumns }">
            <ListTable :data="data" :hidden-columns="(hiddenColumns as any)" @edit-records="onEditRecords"
                @sx-zxjl-list="sxZxjlList" @close-gjjl-dialog="handleCloseGjjlDialog" />
        </template>

        <template #pagination="{ page, total }">
            <PagePagination :page="page" :total="total" @changePage="(v) => ($refs.page as any).changePage(v)">
            </PagePagination>
        </template>

    </ListPage>

    <CustomizeQuery :zdycxObj="zdycxObj" moduleName="咨询记录" @query-data="queryData"></CustomizeQuery>
    <FileDialog :fjObj="fjObj" @sx-list="sxList"></FileDialog>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted } from 'vue'
import ListPage from '@/components/list-page/ListPage.vue'
import { getConsultationRecordsList } from '../api'
import ListTable from './ListTable.vue'
import PageSearch from '@/components/list-page/PageSearch.vue'
import SearchInput from '@/components/list-page/SearchInput.vue'
import { useAuth } from '@/utils/auth'
import { addDialog } from '../dialog/consultationRecordsDialog'
import PagePagination from '@/components/list-page/PagePagination.vue'
import CustomizeQuery from '@/views/menus/n-ykf-customize-query/components/index.vue'
import FileDialog from '@/views/menus/n-ykf-file/components/FileDialog.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const page = ref()

const query = reactive({
    keyword: '',
    customerName: '',
    customizeQueryCondition: []
})

const zdycxObj = reactive({
    isShow: false
});

const auth = useAuth()

const fjObj = reactive({
    isShow: false,
    gjjlId: '',
    mklx: ''
});

const onAddConsultationRecords = async () => {
    let res = await addDialog.title('新增咨询记录').open({ row: { isAdd: true } })

    page.value && page.value.getData()
}

const onEditRecords = async (row) => {
    await addDialog.title('编辑咨询记录').open({ row })
    // 刷新数据
    page.value && page.value.getData();
}

// 打开自定义查询
const openZdycx = async (row) => {
    zdycxObj.isShow = true;
}

const handleCloseGjjlDialog = () => {
    page.value?.getData()
}

const queryData = async (customizeQueryCondition) => {
    zdycxObj.isShow = false;
    query.customizeQueryCondition = customizeQueryCondition;
    page.value?.getData()
}

const sxZxjlList = async () => {
    page.value?.getData()
}
</script>